<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">企业导师联评</div>
      <div class="select">
        <el-select v-model="selectItem" placeholder="选择任务">
          <el-option
            v-for="item in periodList"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="sn-body">
        <div class="des">
          <div v-for="item in learnAnalyseList" :key="item">{{ item }}</div>
        </div>
        <div class="wrap-container">
          <div class="chartsdom" id="eChart_radar0"></div>
          <div class="chartsdom" id="eChart_radar1"></div>
          <div class="chartsdom" id="eChart_radar2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "expertJointEval",
  props: {
    allData: {
      type: Array,
      default() {
        return [];
      },
    },
    dictData: {
      type: Array,
      default() {
        return [];
      },
    },
    currentStudent: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      option: null,
      timer: null,
      xData: [],
      now: +new Date(2019, 1, 1),
      value: Math.random() * 1000,
      oneDay: 24 * 3600 * 1000,
      chartData: [],
      subjectNameList: [],
      periodList: [],
      selectItem: "",
      num: 0,
      learnAnalyseList: [],
    };
  },
  watch: {
    allData: {
      handler() {
        this.getData();
      },
      deep: true,
    },
    selectItem: {
      handler(val) {
        if (val) {
          const data = this.chartData.find((el) => el.period === val);
          data && this.renderChart(data)
        }
      },
      deep: true,
    },
    currentStudent: {
      handler(val) {
        val && this.getData();
      },
      deep: true,
      immediate: false,
    },
  },
  mounted() {},
  methods: {
    getData() {
      const list = this.allData.filter(
        (el) =>
          el.scoreType === "3" && el.stuName === this.currentStudent.stuName
      );
      if (list.length > 0) {
        this.chartData = list.map((el, i) => {
          const obj = { data: [] };
          if (i === 0) {
            this.learnAnalyseList = el.learnAnalyse.split(",");
          }
          const tempReviewIndex = el.reviewIndex.split(";");
          const tempScore = el.score.split(";");
          const list = tempReviewIndex.map((v, key) => {
            const tr = tempReviewIndex[key].split(",");
            const ts = tempScore[key].split(",");
            const tl = tr.map((t, i) => {
              return {
                name: t,
                value: Number(ts[i]),
              };
            });
            return tl;
          });
          obj.period = el.period;
          obj.data = list;
          return obj;
        }); 
        this.periodList = list.map((el) => el.period);
        this.selectItem = list[0].period;

        this.renderChart(this.chartData[0])
        // this.num = 0;
        // this.timer = setInterval(() => {
        //   this.switchItem();
        // }, 2000);
      } else {
        this.chartData = [];
        this.subjectNameList = [];
        this.periodList = [];
        // clearInterval(this.timer);
        // this.getEchart('');
        this.renderChart(null);
      }
    },
    renderChart(obj) {
        ["eChart_radar0", "eChart_radar1", "eChart_radar2"].forEach((el, key) => {
           this.getEchart(obj, el, key);
        });
    },
    switchItem() {
      // this.num += 1;
      // if (this.num > this.chartData.length - 1) {
      //   this.num = 0;
      // }
      // const item = this.chartData[this.num];
      // this.selectItem = item.period;
      // this.getEchart(item.period);
    },
    getEchart(obj, id, key) {
      // eslint-disable-next-line no-undef
      let myChart = echarts.init(document.getElementById(id));
      const list = [];
      const data = this.chartData.filter((el) => el.period === obj.period);
      if (data.length) {
        for (let item of data) {
          const series = {
            value: item.data[key].map((el) => el.value),
            name: item.period,
            itemStyle: {
              normal: {
                // eslint-disable-next-line no-undef
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  {
                    offset: 0,
                    color: "#9c6b44",
                  },
                  {
                    offset: 1,
                    color: "#2a59ac",
                  },
                ]),
                lineStyle: {
                  color: "#fff",
                },
              },
            },
          };
          list.push(series);
        }
      } else {
        const series = {
          value: [],
          name: "",
          itemStyle: {
            normal: {
              // eslint-disable-next-line no-undef
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                {
                  offset: 0,
                  color: "#9c6b44",
                },
                {
                  offset: 1,
                  color: "#2a59ac",
                },
              ]),
              lineStyle: {
                color: "#fff",
              },
            },
          },
        };
        list.push(series);
      }

      if (data.length) {
        const option = {
          tooltip: {
            trigger: "axis",
          },
          radar: [
            {
              indicator: obj.data[key].map((el) => ({
                text: el.name,
                max: 10,
              })),
              radius: "75%",
              center: ["50%", "50%"],
              name: {
                textStyle: {
                  color: "#1883ff",
                },
              },
              axisName: {
                fontSize: 29,
                lineHeight: 29,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              axisLine: {
                show: true,
                symbol: "arrow",
                symbolSize: [5, 7.5],
                lineStyle: {
                  color: "#1883ff",
                  type: "dashed",
                },
              },
              splitArea: {
                show: false,
              },
              splitLine: {
                show: false,
              },
            },
          ],
          series: [
            {
              type: "radar",
              areaStyle: {},
              itemStyle: {
                normal: {
                  areaStyle: {
                    type: "default",
                  },
                  label: {
                    show: true,
                    formatter: function (params) {
                      return params.value + "分";
                    },
                    textStyle: {
                      color: "#fff",
                    },
                  },
                },
              },
              lineStyle: {
                opacity: 0,
              },
              data: list,
            },
          ],
        };
        myChart.setOption(option, true);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      } else {
        myChart.dispose();
      }
    },
  },
  beforeDestroy() {
    // clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 50px;
  top: 1655px;
  width: 1820px;
  height: 400px;
  .chartsdom {
    width: 35%;
    height: 100%;
  }
}

.wrap-container {
  display: flex;
  justify-content: space-between;
}

.des {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #fff;
  margin-bottom: 10px;
  div {
    width: 35%;
    text-align: center;
    margin-left: 269px;
    font-size: 18px;
    //  margin-top: -10px;
  }
}
.select {
  position: absolute;
  right: 0;
}
</style>
